div#ia-org-chart .row
{
    position: relative;
}

div#ia-org-chart .row:last-of-type
{
    padding-top: 20px;
}

div#ia-org-chart div.col-12:not(#director) div.chart-container
{
    background-color: var(--bs-gray-300);
    position: relative;
    z-index: 2;
}

div#ia-org-chart .chart-container span 
{
    display: inline-block;
    position: relative;
    background-color: var(--bs-gray-400);
    padding: 10px;
    width: 100%;
    font-weight: bold;
    z-index: 3;
}

div#ia-org-chart .chart-container ul
{
    list-style-type: none;
    padding-left: 12px;
    padding-top: 10px;
    padding-bottom: 10px;
}

div#ia-org-chart .chart-container ul li:not(:last-of-type)
{
    border-bottom: 1px solid var(--bs-gray-600);
    padding-top: 5px;
    padding-bottom: 5px;
    width: 95%;
}

div#ia-org-chart .chart-container ul li:last-of-type
{
    padding-top: 5px;
    width: 95%;
}

@media (max-width: 767px)
{
    
    div#ia-org-chart #director
    {
        margin-bottom: 10px;
    }

    div#ia-org-chart .row:last-of-type
    {
        padding-top: 10px;
    }
    
    div#ia-org-chart #director-staff,
    div#ia-org-chart .row:last-of-type .col-md-5
    {
        padding-left: 20px;
        width: calc(100% - 20px);
    }

    div#ia-org-chart::before
    {
        content: '';
        position: absolute;
        background-color: var(--bs-gray-400);
        width: 1px;
        height: 81.25%;
        top: 10px;
    }

    div#ia-org-chart .row:last-of-type span::before
    {
        content: '';
        position: absolute;
        background-color: var(--bs-gray-400);
        height: 1px;
        width: 15px;
        left: -15px;
        top: 50%;
    }

    div#ia-org-chart #director-staff li
    {
        position: relative;
    }

    div#ia-org-chart #director-staff .chart-container > ul > li:after
    {
        content: '';
        position: absolute;
        background-color: var(--bs-gray-400);
        display: block;
        height: 1px;
        width: 16px;
        left: -28px;
        top: 50%;
    }
}

@media (min-width: 768px)
{
    /* Vertical Line from Director */
    div#ia-org-chart #director .chart-container::before
    {
        content: '';
        position: absolute;
        background-color: var(--bs-gray-400);
        width: 1px;
        height: calc(100% - 8px);
        left: 50%;
        z-index: 1;
    }
    
    /* Horizontal Line from Director */
    div#ia-org-chart #director .chart-container span::after
    {
        content: '';
        position: absolute;
        background-color: var(--bs-gray-400);
        height: 1px;
        width: var(--bs-gutter-x);
        top: 50%;
        right: calc(-1 * var(--bs-gutter-x));
    }

    /* Horizontal Line for Managers */
    div#ia-org-chart .row:last-of-type::before
    {
        content: '';
        position: absolute;
        background-color: var(--bs-gray-400);
        height: 1px;
        width: 41.667%;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
    }

    /* Vertical Line for Managers */
    div#ia-org-chart .row:last-of-type .chart-container::before
    {
        content: '';
        position: absolute;
        display: block;
        background-color: var(--bs-gray-400);
        width: 1px;
        height: 20px;
        left: 50%;
        top: -20px;
        z-index: 1;
    }
}